<template>
  <div class="home">
    <div class="header">
      <span class="site-name">郑州市</span>
      <span class="sell-btn">我要卖货</span>
    </div>
    <div class="search-inpt">
      <input class="inpt" type="text" placeholder="搜索商品">
    </div>
    <swiper :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide v-for="(item, index) in result.b2bAdvList" :key="index">
      <img class="swiper-img" :src="item.picUrl" alt="">
    </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
    <!-- Optional controls -->
    </swiper>
    <div class="quick-nav">
      <ul class="quick-nav-list">
        <li class="quick-nav-item" v-for="(item, index) in quickNavList" :key="index">
          <img :src="item.imgUrl" alt="">
          <p>{{item.content}}</p>
        </li>
      </ul>
    </div>
    <div class="notice">
      <ul class="notice-list" :style="{ top, transition }">
        <li v-for="(item, index) in notice" :key="index">{{item.content}}</li>
      </ul>
    </div>
    <div class="floor" v-for="(item, index) in result.b2bFloorVoList" :key="index">
      <div class="floor-title">
        <p class="title-con red">{{item.name}}</p>
      </div>
      <div class="floor-scroll">
        <ul class="floor-scroll-list">
          <li class="floor-scroll-item" v-for="(_item, _index) in item.goodsListRecommendLocationsList" :key="_index">
            <img class="cover-img" :src="_item.picsUrl" alt="">
            <h4 class="item-title">{{_item.goodsName}}</h4>
            <p class="item-company">{{_item.dealerName}}</p>
            <h3 class="item-price">￥{{_item.orderPrice}}</h3>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { setInterval, clearInterval } from 'timers';
export default {
  name: 'home',
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        autoplay: {
          delay: 1500,
          disableOnInteraction: false
        },
        speed: 1000,
        pagination: {
            el: '.swiper-pagination'
        }
      },
      result: {},
      quickNavList: [
        {
          content: '常购清单',
          imgUrl: require('../assets/ic_idx_list.png')
        },
        {
          content: '领券中心',
          imgUrl: require('../assets/ic_idx_coupon.png')
        },
        {
          content: '我的订单',
          imgUrl: require('../assets/ic_idx_order.png')
        },
        {
          content: '我的供应商',
          imgUrl: require('../assets/ic_idx_dea.png')
        }
      ],
      notice:[
        {
          content: '新增《营销工具“拼团”玩法使用说明》内容详情向蜂网头条1'
        },{
          content: '新增《营销工具“拼团”玩法使用说明》内容详情向蜂网头条2'
        },{
          content: '新增《营销工具“拼团”玩法使用说明》内容详情向蜂网头条3'
        }
      ],
      activedIndex: 0
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
    top() {
      return -this.activedIndex * 0.4 + 'rem'
    },
    transition() {
      return this.activedIndex === 0 ? 'none' : 'top 0.5s'
    }
  },
  methods: {
    getIndexData() {
      this.axios.post('/getListB2bIndex', {
        "merchantId":0,
        "siteid":22,
        "storeCustId":0,
        "terminal":3,
        "storeId":0


        
      })
      .then(res => {
        if(res.data.status.statusCode === 0) {
          this.result = res.data.result
        }
      })
    },
    changeActivedIndex() {
      this.timer = setInterval(()=> {
        if(this.activedIndex < this.notice.length - 1) {
          this.activedIndex ++;
        }else {
          this.activedIndex = 0;
        }
      },1000)
    }
  },
  destroyed() {
    clearInterval(this.timer)
  },
  created() {
    this.getIndexData()
  },
  mounted() {
    this.changeActivedIndex()
  }
}
</script>
<style lang="scss" scoped>
.home {
    padding-bottom: 0.49rem;
    .swiper-container {
      margin-top: -0.54rem;
    }
    .swiper-img {
      height: 2.6rem;
      width: 100%;
    }
}
.header {
  height: 0.45rem;
  display: flex;
  padding: 0 0.14rem;
  background: #dd3333;
  justify-content: space-between;
  align-items: center;
  font-size: 0.16rem;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  .site-name {
    margin-left: 0.17rem;
    position: relative;
    &::after {
      content: "";
      width: 0.12rem;
      height: 0.13rem;
      position: absolute;
      left: -0.2rem;
      top: 50%;
      margin-top: -0.065rem;
      background-image: url('../assets/dingwei_icon.png');
      background-size: 100% 100%;
      background-position: center;
      background-repeat: no-repeat;
    }
    &::before {
      content: "";
      position: absolute;
      width: 0.08rem;
      height: 0.08rem;
      right: -0.12rem;
      background-image: url('../assets/down_icon.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      top: 50%;
      margin-top: -0.04rem;
    }
  }
  .sell-btn {
    width: 0.77rem;
    height: 0.24rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.14rem;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      height: 200%;
      width: 200%;
      border: 1px solid #fff;
      transform: scale(0.5,0.5);
      border-radius: 0.24rem;
    }
  }
}
.search-inpt {
  padding: 0.11rem 0.14rem;
  position: relative;
  z-index: 99;
  .inpt {
    box-sizing: border-box;
    width: 100%;
    height: 0.32rem;
    background: #fff;
    border-radius: 0.32rem;
    outline: none;
    appearance: none;
    border: none;
    opacity: 0.9;
    padding-left: 0.32rem;
    font-size: 0.14rem;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      width: 0.13rem;
      height: 0.13rem;
    }
  }
}
.swiper-wrap {
  width: 100%;
}
.quick-nav {
  padding: 0 0.1rem;
  margin-top: -0.87rem;
  position: relative;
  z-index: 9;
  .quick-nav-list {
    height: 1.01rem;
    display: flex;
    align-items: center;
    padding: 0 0.26rem;
    box-sizing: border-box;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
    border-radius: 4px;
    justify-content: space-between;
    .quick-nav-item {
      font-size: 0.12rem;
      color: #333;
      img {
        width: 0.4rem;
        height: 0.4rem;
        margin-bottom: 0.1rem;
      }
    }
  }
}
.notice {
  height: 0.4rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  font-size: 0.12rem;
  color: #333;
  padding: 0 0.14rem 0 0.32rem;
  margin-top: 0.1rem;
  background: #fff;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  &::before {
    content: "";
    position: absolute;
    width: 0.12rem;
    height: 0.1rem;
    left: 0.14rem;
    top: 50%;
    margin-top: -0.05rem;
    z-index: 9;
    background-image: url('../assets/icon_voice.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .notice-list {
    position: relative;
    transition: top 0.5s;
    li {
      min-width: 2.8rem;
      height: 0.4rem;
      line-height: 0.4rem;
    }
  }
}
.floor {
  .floor-title {
    height: 0.4rem;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    .title-con {
      padding: 0 0.37rem;
      position: relative; 
      font-size: 0.14rem;
      font-weight: 600;
    }
    .red {
      color: #ED0C0D;
      &::before {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        width: 0.27rem;
        height: 0.16rem;
        background-image: url('../assets/ic_left_red.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      &::after {
        position: absolute;
        content: "";
        right: 0;
        top: 0;
        width: 0.27rem;
        height: 0.16rem;
        background-image: url('../assets/ic_right_red.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
  }
  .floor-scroll {
    padding: 0.1rem 0;
    background: #fff;
    .floor-scroll-list {
      padding: 0 0.14rem;
      overflow-x: auto;
      display: flex;
      flex-wrap: nowrap;
      overflow-y: hidden;
      .floor-scroll-item {
        min-width: 1.34rem;
        max-width: 1.34rem;
        box-sizing: border-box;
        margin-right: 0.1rem;
        position: relative;
        padding: 0.1rem;
        &::before {
          position: absolute;
          content: "";
          height: 200%;
          width: 200%;
          left: -50%;
          top: -50%;
          border: 1px solid #ccc;
          transform: scale(0.5,0.5);
          box-sizing: border-box;
        }
        .cover-img {
          width: 1.14rem;
          height: 1.14rem;
        }
        .item-title {
          font-size: 0.12rem;
          color: #333;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-align: left;
          margin-top: 0.14rem;
        }
        .item-company {
          font-size: 0.09rem;
          color: #999;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-align: left;
          margin-top: 0.06rem;
          margin-bottom: 0.1rem;
        }
        .item-price {
          font-size: 0.18rem;
          color: #dd3333;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-align: left;
        }
      }
     .floor-scroll-item:last-child::after {
          content: "";
          display: inline-block;
          width: 0.14rem;
          height: 1.99rem;
          position: absolute;
          right: -0.14rem;
        }
    }
  }
}
</style>
<style>
  .swiper-pagination-bullet {
    background: rgba(255,255,255,0.80);
  }
  .swiper-pagination-bullet-active { 
      background-color: #dd3333; 
    }
    .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
      bottom: 1rem;
    }
</style>

